<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
</body>
<script>    
    let number = 30 
    let obj = {
        name:"dabai",
        sex:"male",
        //age:18          //这边的属性可以随意修改值，并赋予新值
    }
    
    //给对象新增属性 3个参数  对象名、属性名称、配置项
    Object.defineProperty(obj,'age',{
        // value:20,       //这边赋予的值 不能通过赋值随意修改，需要通过修改其他配置项的状态来完成修改,其次它不可以被循环读取，属性颜色会淡一点 
        // enumerable:true, //开启后 age的value值可以被枚举读取
        // writable:true,   //开启后属性可以被修改
        // configurable:true, //控制属性是否可以被删除  delete obj.property

        //和C#中对象的get set 类似
        get(){
            console.log("当数据被读取时");
            return number;//注意 get()函数 别称为getter 简写的写法为get() 全写名为get:function name(name可以省略){},其次会和上面直接指定value造成冲突
        },

        set(value){
            console.log("当数据被修改时,修改的值为",value);
            number = value; 
        }
        //通过get() 和  set() 以变量来修改属性的值，有点类似双向绑定 修改变量可以影响属性  修改属性也能影响变量
    })

    console.log(obj)
    console.log(Object.keys(obj));
</script>